<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="/lib/bootstrap-3.3.7-dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="/lib/swiper/swiper.css" />
		<link rel="stylesheet" type="text/css" href="/css/base.css" />
		<link rel="stylesheet" type="text/css" href="/css/details.css" />
		<link rel="stylesheet" type="text/css" href="/css/base-list.css" />
		<link rel="stylesheet" type='text/css' href="/fonts/iconfont.css" />
		<title></title>
	</head>
	<body>
		<div class="fa">
			<!-- 导航 -->
			<nav class="navbar navbar-default">
				
			</nav>
			<!-- 主体-->
			<div class="selector">
				<div class="main">
					<!-- 下滑导航 -->
					<div class="ui-stickynav">
						<div class="container">
							<div class='part-1'>
								<ul>
									<li class="active-underline"><a href="#features" class="features">特色</a></li>
									<li><a href="#specs" class="specs">规格</a></li>
									<li><a href="#questions" class="questions">问题</a></li>
									<li><a href="#comments" class="comments">评论</a></li>
								</ul>
							</div>
							<div class='part-2'>
								<button type="button" class="btn btn-primary add-car add-car2">添加到购物车</button>
								<button type="button" class="btn btn-default"><span class="iconfont icon-xin"></span></button>
							</div>
						</div>
					</div>
					<div class='details-part-1'>
						<div class="container">
							<ul>
								<li><a href="#">角色主题</a></li>
								<li><a href="#">派提鸭</a></li>
							</ul>
						</div>
					</div>
					<div class='details-part-2'>
						
					</div>
					<script type="text/html" id="prodDetailTemplate">
						<div class="container">
							<div class='product-gallery'>
								<div class="box">
									<div class="float-img"><img src="{{photo[0].url}}" class="zoom-image"/></div>
									<!-- <div class="zoom-small"></div>
									<div class="zoom-big"><img src="{{photo[0].url}}"/></div> -->
								</div>
							</div>
							<div class='product-info'>
								<div class="product-header">
									<h1>{{title}}</h1>
									<div class="ratings">
										<div class="ratings-star">
											<span class='iconfont icon-star'></span>
											<span class='iconfont icon-star'></span>
											<span class='iconfont icon-star'></span>
											<span class='iconfont icon-star'></span>
											<span class='iconfont icon-star'></span>
										</div>
										<a href="#">发表首篇评论</a>
									</div>
									<span>{{introduction}}</span>
								</div>
								<div class="product-shop">
									<span class="price">￥{{price}}</span>
									<div class="product-option">
										<dl class="option">
											<dt>
												<span>款式：</span>
												<span class="des">一个漂亮的商品</span>
											</dt>
											<dd>
												<ul id="zoomlist">
													{{each photo item}}
														<li>
															<a href='#' data-image='{{item.url}}' data-zoom-image='{{item.url}}'>
																<img src='{{item.url}}' />
															</a>
														</li>
													{{/each}}
												</ul>
											</dd>
										</dl>
										<dl class="con-price">
											<dt>原价：</dt>
											<dd>￥{{originPrice}}</dd>
										</dl>
									</div>
									<div class="product-number">
										<dl class="part-1">
											<dt>数量：</dt>
											<dd>
												<div class="quantity-group">
													<a href='javascript:;' class='quantity minus btn-sub'>-</span></a>
													<input type="text" name="" id="" value="1" class='quantity-count' />
													<a href='javascript:;' class='quantity plus btn-add'>+</span></a>
												</div>
											</dd>
										</dl>
										<div class='part-2'>
											<button class='btn btn-primary-inverse btn-price'>立即结账</button>
											<button class='btn btn-primary add-car'>添加到购物车</button>
											<button class='btn btn-default'><span class="iconfont icon-xin"></span></button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</script>
					<div class='details-part-3'>
						<div class="container">
							<ul>
								<li><a href="#">特色</a></li>
								<li><a href="#">规格</a></li>
								<li><a href="#">问题</a></li>
								<li><a href="#">评论</a></li>
							</ul>
						</div>
					</div>
					<div class='details-part-4 maodian' id="features">
						<div class="container">
							<ul class="section-body feature-body">
								
							</ul>
							<script type="text/html" id="featuresTemplate">
								{{each descContentList item}}
								<li class='text-block'>
									<img src="{{item.photo.url}}">
									<div class="info">
										<p>{{item.text}}</p>
									</div>
								</li>
								{{/each}}
							</script>
						</div>
					</div>
					<div class='details-part-5 details-part maodian' id="specs">
						<div class="container">
							<h2>商品规格</h2>
							<ul>
								<li>
									<h4 class="wen">基本信息</h4>
									<ul class="spec-group">
										<li><span class="prvo">材质</span><span class="val">硅胶</span></li>
										<li><span class="prvo">包装内容物</span><span class="val">逗扣原木扩香手机座x1</span></li>
									</ul>
								</li>
								<li>
									<h4 class="wen">保固服务</h4>
									<ul class="spec-group">
										<li><span class="prvo">保固</span><span class="val">新品瑕疵</span></li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
					<div class="details-part-6 details-part maodian" id="questions">
						<div class="container">
							<h2>常见问题</h2>
							<div class="section-body">
								<div class='panel'>
									<div class="panel-heading">
										<h4>我预计什么时候可以拿到商品？</h4>
									</div>
									<div class="panel-collapse">依照订单顺序陆续出货。广东东莞发货，正常情况下发货后广东1-2天，江浙沪2-3天能收到，其他大部分地区4-5天。</div>
								</div>
								<div class='panel'>
									<div class="panel-heading">
										<h4>我想修改订单内容怎么办？</h4>
									</div>
									<div class="panel-collapse">关注【Bone蹦克】官网微信公众号为您提供在线咨询。</div>
								</div>
								<div class='panel'>
									<div class="panel-heading">
										<h4>商品有质保吗？</h4>
									</div>
									<div class="panel-collapse">商品质保范围仅限新品瑕疵。收到货后7日内请务必要将商品打开检查是否有问题需退换货，超过7日恕不受理。如需退货 /
										换货，请关注【Bone蹦克】官网微信公众号为您提供在线咨询。</div>
								</div>
								<div class='panel'>
									<div class="panel-heading">
										<h4>我还有其他问题需要咨询？</h4>
									</div>
									<div class="panel-collapse">关注【Bone蹦克】官网微信公众号为您提供在线咨询。</div>
								</div>
							</div>
						</div>
					</div>
					<!--  -->
					<div class="details-part-7 details-part maodian" id="comments">
						<div class="container">
							<h2>顾客评论</h2>
							<a href="#"><span class="iconfont icon-bianji"></span>&nbsp;发表首篇评论</a>
						</div>
					</div>
					<!-- 第八部分 -->
					<div class="details-part-list details-part">
						<div class="container">
							<div class="group">
								<h2>看此商品的人也看了</h2>
								<!-- Swiper -->
								<div class="swiper-container swiper-container1">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<a href="#">
												<span>1</span>
												<div><img src="../images/pic1.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a>
										</div>
										<div class="swiper-slide">
											<a href="#">
												<span>2</span>
												<div><img src="../images/pic2.jpg" alt=""></div>
												<h4>颈挂iPhone 12 Mini/12/12Pro/12 Pro Max 透明手机壳</h4>
											</a>
										</div>
										<div class="swiper-slide">
											<a href="#">
												<span>3</span>
												<div><img src="../images/pic3.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a>
										</div>
										<div class="swiper-slide"><a href="#">
												<span>4</span>
												<div><img src="../images/pic4.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
										<div class="swiper-slide"><a href="#">
												<span>5</span>
												<div><img src="../images/pic5.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
										<div class="swiper-slide"><a href="#">
												<span>6</span>
												<div><img src="../images/pic6.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
										<div class="swiper-slide"><a href="#">
												<span>7</span>
												<div><img src="../images/pic7.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
										<div class="swiper-slide"><a href="#">
												<span>8</span>
												<div><img src="../images/pic8.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
										<div class="swiper-slide"><a href="#">
												<span>9</span>
												<div><img src="../images/pic9.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
										<div class="swiper-slide"><a href="#">
												<span>10</span>
												<div><img src="../images/pic10.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
									</div>
									<!-- Add Pagination -->
									<div class="swiper-pagination"></div>
								</div>
								<!-- Add Arrows -->
								<div class="swiper-button-next swiper-button-next1"></div>
								<div class="swiper-button-prev swiper-button-prev1"></div>
							</div>
						</div>
					</div>
					<!-- 第九部分 -->
					<div class="details-part-list details-part">
						<div class="container">
							<div class="group">
								<h2>最近查看的产品</h2>
								<div class="swiper-container swiper-container2">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<a href="#">
												<span>1</span>
												<div><img src="../images/pic1.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a>
										</div>
										<div class="swiper-slide">
											<a href="#">
												<span>2</span>
												<div><img src="../images/pic2.jpg" alt=""></div>
												<h4>颈挂iPhone 12 Mini/12/12Pro/12 Pro Max 透明手机壳</h4>
											</a>
										</div>
										<div class="swiper-slide">
											<a href="#">
												<span>3</span>
												<div><img src="../images/pic3.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a>
										</div>
										<div class="swiper-slide"><a href="#">
												<span>4</span>
												<div><img src="../images/pic4.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
										<div class="swiper-slide"><a href="#">
												<span>5</span>
												<div><img src="../images/pic5.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
										<div class="swiper-slide"><a href="#">
												<span>6</span>
												<div><img src="../images/pic6.jpg" alt=""></div>
												<h4>Cup Tie Holder环保杯绑</h4>
											</a></div>
									</div>
									<!-- Add Pagination -->
									<div class="swiper-pagination"></div>
								</div>
								<!-- Add Arrows -->
								<div class="swiper-button-next swiper-button-next2"></div>
								<div class="swiper-button-prev swiper-button-prev2"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<footer>
				
			</footer>
			<!-- 微信 -->
			<div class="aside">
				<a href="#" title="传送讯息给我们"><span class="iconfont icon-weixin"></span></a>
			</div>
			<div class="tankuang">
				<img src="/images/gou.png"/>
				<p>添加成功</p>
			</div>
		</div>
		<script src="/lib/requirejs/require.js" data-main='/js/details.js'></script>
		<script src="/lib/jquery/jquery.min.js"></script>
		<script src="/js/untils.js"></script>
		<script src="/lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<!-- <script src="/lib/swiper/swiper.js"></script>
		<script src="/js/header-base.js"></script>
		<script src="/js/details.js"></script>
		<script src="/js/base-list.js"></script> -->
		<script type="text/javascript">
			
		</script>
	</body>
</html>
